import { useState, useEffect } from 'react';
import { Button, Input, InputNumber, Form, Select, message } from 'antd';
import { logisticsCompanyList } from '@/utils/config';
import { customTrimFunc } from '@/utils/utils.jsx';
import { saveRefundlogistics } from '../service';
import CommonLoading from '@/components/CommonLoading';
import styles from './index.module.less';

const { TextArea } = Input;
const { Option } = Select;

const logisticsCompanyOption = logisticsCompanyList.map((item, index) => (
  <Option key={index} value={item}>
    {item}
  </Option>
));

const FormContent = ({ handleCancel, handleOk }) => {
  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    form.resetFields();
  }, []);

  //新增退货物流单号
  const addRundlogistics = async (val) => {
    setLoading(true);
    const { success } = await saveRefundlogistics({
      ...val,
      note: val.note ? val.note.slice(0, 100) : undefined,
    });
    if (success) {
      message.success('新增成功！');
      form.resetFields();
      handleOk();
    }
    setLoading(false);
  };

  //提交
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        const params = customTrimFunc(value);
        if(params.logisticsNo){
          addRundlogistics(params);
        }else{
          message.info('物流单号格式有误！');
        }
      })
      .catch((err) => {
        console.log(err);
      }).finally(()=>{
        setTimeout(()=>{
          onCancel();
        },100)
      });
  };

  //取消
  const onCancel = () => {
    form.resetFields();
  };

  return (
    <>
      <Form
        // {...layout}
        form={form}
        name="add-receipt-return"
        // className="new-search-form-style"
        style={{ marginBottom: '16px' }}
        layout={'vertical'}
        initialValues={{}}
      >
        <Form.Item
          label=""
          className={`${styles.inputWrapper} ${styles.labelReqire}`}
        >
          <div className="flex">
            <span className={styles.itemTitleSpec}>物流单号</span>
            <Form.Item
              name="logisticsNo"
              rules={[{ required: 'true', message: '请输入物流单号' }]}
            >
              <Input
                autoFocus
                maxLength={50}
                placeholder="请输入物流单号"
                size="default"
                onPressEnter={onOk}
              />
            </Form.Item>
          </div>
        </Form.Item>

        <Form.Item
          label=""
          className={`${styles.inputWrapper}`}
        >
          <div className="flex">
            <span className={styles.itemTitleSpec}>&nbsp;&nbsp;&nbsp;包裹重量</span>
            <Form.Item
              name="weight"
              rules={[
                {
                  pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
                  message: '不超过两位小数',
                },
              ]}
            >
              <InputNumber
                style={{ width: '240px' }}
                min={0}
                step={0.01}
                max={9999}
                placeholder="请输入包裹重量"
              />
            </Form.Item>
          </div>
        </Form.Item>

        <Form.Item label="" className={styles.inputWrapper}>
          <div className="flex">
            <span
              style={{ paddingLeft: '12px' }}
              className={styles.itemTitleSpec}
            >
              物流公司
            </span>
            <Form.Item name="logisticsCompany">
              <Select style={{ width: '240px' }} placeholder="请选择">
                {logisticsCompanyOption}
              </Select>
            </Form.Item>
          </div>
        </Form.Item>

        <div className={styles.itemTitle}>备注</div>
        <Form.Item label="" name="note" style={{ marginRight: '24px' }}>
          <div className={styles.myTextArea}>
            <TextArea
              placeholder="请输入备注"
              rows={4}
              showCount
              maxLength={100}
              bordered={false}
              style={{ width: 272, padding: '14px', paddingBottom: '34px' }}
            />
          </div>
        </Form.Item>

        <Form.Item>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop: 10 }}>
            <div className='common-color13'>注：扫码即确定！</div>
            <div>
              <Button
                style={{ marginRight: '12px' }}
                onClick={onCancel}
                key="cancel"
                shape="round"
                className="newRoundBtn"
              >
                清空/取消
              </Button>
              <Button
                shape="round"
                //   className="newRoundBtn"
                onClick={onOk}
                style={{ marginRight: '12px', height: '32px', fontSize: '12px' }}
                key="confirm"
                type="primary"
              >
                确定登记
              </Button>
            </div>
          </div>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </>
  );
};

export default FormContent;
